<div class="modal-header">
  <h4 class="modal-title lbl">Re-streaming: {{ channel?.name }}</h4>
</div>
<div class="modal-body">
  <div *ngIf="!started">
    <p>
      If your IPTV service does not allow more than one connection, the re-streaming feature allows
      you to share any livestream with friends and family over LAN/WAN
    </p>
    <br />
    <p>
      Press start to launch the re-streaming service. Instructions to share your re-streamed
      livestream will appear below along with its status
    </p>
  </div>
  <div *ngIf="started" class="selectable box mt-3">
    <p>Running and accessible from the following ips...</p>
    <br />
    <p>Local ips:</p>
    <p *ngFor="let local of networkInfo?.local_ips">
      {{ local }}
    </p>
    <br />
    <p>WAN address:</p>
    <p>{{ networkInfo?.wan_ip }}</p>
  </div>
  <div *ngIf="started">
    <br />
    <p>
      Select an IP and press the share button below to generate an .otv file. You will be able to
      share this file with your friends so they can import it in Open TV and watch your re-streamed
      content.
    </p>
    <br />
    <p>
      You can import .otv files in Open TV by having or creating a custom source. Make sure to
      select the right IP for the right context; sharing an .otv file with one of your local IPs
      will not work for someone outside your LAN.
    </p>
    <br />
    <label for="ip-select">Select IP to share</label>
    <select [(ngModel)]="selectedIP" id="ip-select" class="form-control">
      <option *ngFor="let local of networkInfo?.local_ips">{{ local }}</option>
      <option>{{ networkInfo?.wan_ip }}</option>
    </select>
  </div>
</div>
<div class="modal-footer">
  <button *ngIf="!started" [disabled]="loading" (click)="start()" class="btn btn-primary">
    <span>Start</span>
    <svg
      class="icon ms-1"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
      />
    </svg>
  </button>
  <button
    class="btn btn-success d-inline-flex align-items-center"
    (click)="watch()"
    [disabled]="loading || watching"
    *ngIf="started"
  >
    <span>Watch</span>
    <svg
      class="icon ms-1"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M11,6H13V13H11V6M9,20A1,1 0 0,1 8,21H5A1,1 0 0,1 4,20V15L6,6H10V13A1,1 0 0,1 9,14V20M10,5H7V3H10V5M15,20V14A1,1 0 0,1 14,13V6H18L20,15V20A1,1 0 0,1 19,21H16A1,1 0 0,1 15,20M14,5V3H17V5H14Z"
      />
    </svg>
  </button>
  <button
    class="btn btn-primary d-inline-flex align-items-center"
    (click)="share()"
    [disabled]="loading"
    *ngIf="started"
  >
    <span>Share</span>
    <svg
      class="icon ms-1"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M12,2A8,8 0 0,0 4,10C4,14.03 7,17.42 11,17.93V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15A1,1 0 0,0 14,19H13V17.93C17,17.43 20,14.03 20,10A8,8 0 0,0 12,2M12,4C12,4 12.74,5.28 13.26,7H10.74C11.26,5.28 12,4 12,4M9.77,4.43C9.5,4.93 9.09,5.84 8.74,7H6.81C7.5,5.84 8.5,4.93 9.77,4.43M14.23,4.44C15.5,4.94 16.5,5.84 17.19,7H15.26C14.91,5.84 14.5,4.93 14.23,4.44M6.09,9H8.32C8.28,9.33 8.25,9.66 8.25,10C8.25,10.34 8.28,10.67 8.32,11H6.09C6.03,10.67 6,10.34 6,10C6,9.66 6.03,9.33 6.09,9M10.32,9H13.68C13.72,9.33 13.75,9.66 13.75,10C13.75,10.34 13.72,10.67 13.68,11H10.32C10.28,10.67 10.25,10.34 10.25,10C10.25,9.66 10.28,9.33 10.32,9M15.68,9H17.91C17.97,9.33 18,9.66 18,10C18,10.34 17.97,10.67 17.91,11H15.68C15.72,10.67 15.75,10.34 15.75,10C15.75,9.66 15.72,9.33 15.68,9M6.81,13H8.74C9.09,14.16 9.5,15.07 9.77,15.56C8.5,15.06 7.5,14.16 6.81,13M10.74,13H13.26C12.74,14.72 12,16 12,16C12,16 11.26,14.72 10.74,13M15.26,13H17.19C16.5,14.16 15.5,15.07 14.23,15.57C14.5,15.07 14.91,14.16 15.26,13Z"
      />
    </svg>
  </button>
  <button
    class="btn btn-danger d-inline-flex align-items-center"
    *ngIf="started"
    [disabled]="loading"
    (click)="stop()"
  >
    <span>Stop</span>
    <svg
      class="icon ms-1"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M9,9H15V15H9"
      />
    </svg>
  </button>
  <button
    (click)="activeModal.close('close')"
    class="btn btn-secondary d-inline-flex align-items-center"
    *ngIf="!started"
  >
    <span>Close</span>
    <svg
      class="icon ms-1"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
      />
    </svg>
  </button>
</div>
